<template>
  <view class="mine-info-edit-page">
    <!-- 表单内容 -->
    <view class="form-content">
      <uni-forms ref="form" :model="user" labelWidth="80px">
        <uni-forms-item label="用户昵称" name="nickName">
          <uni-easyinput v-model="user.nickName" placeholder="请输入昵称" />
        </uni-forms-item>
        <uni-forms-item label="手机号码" name="phonenumber">
          <uni-easyinput v-model="user.phonenumber" placeholder="请输入手机号码" />
        </uni-forms-item>
        <uni-forms-item label="邮箱" name="email">
          <uni-easyinput v-model="user.email" placeholder="请输入邮箱" />
        </uni-forms-item>
        <uni-forms-item label="性别" name="sex" required>
          <uni-data-checkbox v-model="user.sex" :localdata="sexs" />
        </uni-forms-item>
      </uni-forms>
    </view>

    <!-- 底部操作按钮 -->
    <view class="footer-actions">
      <view class="action-buttons">
        <view class="cancel-btn" @click="goBack">
          取消
        </view>
        <view class="submit-btn" @click="submit">
          保存修改
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { getUserProfile } from "@/api/system/user"
import { updateUserProfile } from "@/api/system/user"
import { ref, getCurrentInstance } from "vue"
import { onReady } from "@dcloudio/uni-app"

const { proxy } = getCurrentInstance()
const submitting = ref(false)
const user = ref({
  nickName: "",
  phonenumber: "",
  email: "",
  sex: ""
})
const sexs = [{
  text: '男',
  value: "0"
}, {
  text: '女',
  value: "1"
}]
const rules = ref({
  nickName: {
    rules: [{
      required: true,
      errorMessage: '用户昵称不能为空'
    }]
  },
  phonenumber: {
    rules: [{
      required: true,
      errorMessage: '手机号码不能为空'
    }, {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      errorMessage: '请输入正确的手机号码'
    }]
  },
  email: {
    rules: [{
      required: true,
      errorMessage: '邮箱地址不能为空'
    }, {
      format: 'email',
      errorMessage: '请输入正确的邮箱地址'
    }]
  }
})

function getUser() {
  getUserProfile().then(response => {
    user.value = response.data
  })
}

function submit(ref) {
  if (submitting.value) return
  
  submitting.value = true
  proxy.$refs.form.validate().then(res => {
    updateUserProfile(user.value).then(response => {
      proxy.$modal.showToast("修改成功")
      setTimeout(() => {
        goBack()
      }, 1500)
    }).finally(() => {
      submitting.value = false
    })
  }).catch(() => {
    submitting.value = false
  })
}

function goBack() {
  uni.navigateBack()
}

onReady(() => {
  proxy.$refs.form.setRules(rules.value)
})

getUser()
</script>

<style lang="scss" scoped>
.mine-info-edit-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120px; // 为底部按钮留出空间
  
  .form-content {
    background: white;
    margin: 8px;
    border-radius: 8px;
    padding: 16px;
  }
  
  .footer-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #e8e8e8;
    padding: 16px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    
    .action-buttons {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      
      .cancel-btn {
        background: white;
        border: 2px solid #d9d9d9;
        color: #434343;
        padding: 12px 20px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        min-width: 100px;
        height: 44px;
        text-align: center;
        line-height: 20px;
        transition: all 0.2s ease;
        
        &:active {
          background: #f5f5f5;
          border-color: #bfbfbf;
        }
      }
      
      .submit-btn {
        background: #1890ff;
        color: white;
        padding: 12px 20px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        min-width: 100px;
        height: 44px;
        text-align: center;
        line-height: 20px;
        border: none;
        transition: all 0.2s ease;
        
        &:active {
          background: #096dd9;
          transform: translateY(1px);
        }
      }
    }
  }
}
</style>